<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./plus_skin/css/plus.css" rel="stylesheet" type="text/css" />
<title>仿G+圈子效果</title>
</head>
<body>
	<div id="plus">
		<a id="p_m_sa" href="#" class="p_bt">全选/反选</a> <a id="p_clear"
			href="javascript:;" class="p_bt">清空圈子</a>
		<div id="p_m_b">
			<div class="p_m_i_b">
				<div class="p_m" name="m_1">
					<img src="plus_img/test_face1.png" small="plus_img/small_test_face1.png" /> 
					<span class="p_m_n">JIA GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_2">
					<img src="plus_img/test_face1.png" small="plus_img/small_test_face1.png" /> 
					<span class="p_m_n">JIA GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_3">
					<img src="plus_img/test_face1.png" small="plus_img/small_test_face1.png" /> 
					<span class="p_m_n">JIA GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_4">
					<img src="plus_img/test_face1.png" small="plus_img/small_test_face1.png" /> 
					<span class="p_m_n">JIA GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_5">
					<img src="plus_img/test_face1.png" small="plus_img/small_test_face1.png" /> 
					<span class="p_m_n">JIA GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_6">
					<img src="plus_img/test_face1.png"
						small="plus_img/small_test_face1.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_7">
					<img src="plus_img/test_face1.png"
						small="plus_img/small_test_face1.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_8">
					<img src="plus_img/test_face1.png"
						small="plus_img/small_test_face1.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_9">
					<img src="plus_img/test_face1.png"
						small="plus_img/small_test_face1.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_10">
					<img src="plus_img/test_face1.png"
						small="plus_img/small_test_face1.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_11">
					<img src="plus_img/test_face1.png"
						small="plus_img/small_test_face1.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_12">
					<img src="plus_img/test_face1.png"
						small="plus_img/small_test_face1.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_13">
					<img src="plus_img/test_face1.png"
						small="plus_img/small_test_face1.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_14">
					<img src="plus_img/test_face1.png"
						small="plus_img/small_test_face1.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_15">
					<img src="plus_img/test_face1.png"
						small="plus_img/small_test_face1.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>

				<div class="p_m" name="m_16">
					<img src="plus_img/test_face2.png"
						small="plus_img/small_test_face2.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_17">
					<img src="plus_img/test_face2.png"
						small="plus_img/small_test_face2.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_18">
					<img src="plus_img/test_face2.png"
						small="plus_img/small_test_face2.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_19">
					<img src="plus_img/test_face2.png"
						small="plus_img/small_test_face2.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>
				<div class="p_m" name="m_20">
					<img src="plus_img/test_face2.png"
						small="plus_img/small_test_face2.png" /> <span class="p_m_n">JIA
						GUO</span>
					<div class="c"></div>
					<span class="p_m_t"></span>
					<div class="p_m_hs"></div>
				</div>

				<div class="c"></div>
			</div>
		</div>
		<input type="text" id="p_m_hi" value="" style="" />

		<div class="p_m_line">
			<div class="p_m_tips">将联系人拖到下面的圈子中，创建圈子</div>
		</div>



		<div id="cycle">
			<div class="p_c" id="new">
				<img src="plus_skin/img/new_cycle_bg.jpg" class="p_c_img" />
				<div class="p_c_c_box" style="display: none;"></div>
				<div class="p_c_c n_p_c_c">创建圈子</div>
				<div class="p_c_hs"></div>
			</div>

			<div class="p_c" id="c_1">
				<img src="plus_skin/img/normal_cycle_bg.jpg" class="p_c_img" />
				<div class="p_c_c_box" style="display: none;"></div>
				<div class="p_c_c">
					已创建群1<br /> <span class="p_c_c_num">0</span>
				</div>
				<div class="p_c_hs"></div>
			</div>

			<div class="p_c" id="c_2">
				<img src="plus_skin/img/normal_cycle_bg.jpg" class="p_c_img" />
				<div class="p_c_c_box" style="display: none;"></div>
				<div class="p_c_c">
					已创建群2<br /> <span class="p_c_c_num">0</span>
				</div>
				<div class="p_c_hs"></div>
			</div>


			<div class="p_c" id="c_3">
				<img src="plus_skin/img/normal_cycle_bg.jpg" class="p_c_img" />
				<div class="p_c_c_box" style="display: none;"></div>
				<div class="p_c_c">
					已创建群3<br /> <span class="p_c_c_num">0</span>
				</div>
				<div class="p_c_hs"></div>
			</div>


			<div class="p_c" id="c_4">
				<img src="plus_skin/img/normal_cycle_bg.jpg" class="p_c_img" />
				<div class="p_c_c_box" style="display: none;"></div>
				<div class="p_c_c">
					已创建群4<br /> <span class="p_c_c_num">0</span>
				</div>
				<div class="p_c_hs"></div>
			</div>

			<div class="c"></div>
		</div>





	</div>




</body>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script language="javascript" src="./plus_skin/js/jquery.drag.js"></script>
<script language="javascript" src="./plus_skin/js/plus.js"></script>
<script>
	$('#p_m_b').plus_member();
	$('#p_clear').click(function(){
		location.reload()
	})
</script>
</html>
